﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Search</title>
    <link href="CSS/Search.css" rel="stylesheet" type="text/css" />
    <!-- OSX Style CSS files -->
    <link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />
    <!-------------------------------------------- SCRIPTS AND CSS FOR JQGRID------------------------------------------->
    <script src="JS/Plugins/jquery-1.9.1.js" type="text/javascript"></script>
    <%--  <link href="Themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <link href="Themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />--%>
    <%--<script src="JS/Plugins/grid.locale-en.js" type="text/javascript"></script>--%>
    <%-- <script src="JS/Plugins/jquery.jqGrid.min.js" type="text/javascript"></script>--%>
    <script src="JS/Plugins/json2-min.js" type="text/javascript"></script>
    <%--<script src="JS/Plugins/demo.js" type="text/javascript"></script>--%>
    <%--<script src="JS/cartGrid.js" type="text/javascript"></script>--%>
    <script src="JS/megaMenu.js" type="text/javascript"></script>
    <script type='text/javascript' src='js/Plugins/jquery.simplemodal.js'></script>
    <script type='text/javascript' src='js/Plugins/osx.js'></script>
    <%--<link href="css/prism.css" rel="stylesheet"/>--%>
    <script src="js/ga.js" type="text/javascript"></script>
    <script src="js/embed.js" type="text/javascript"></script>
    <script src="js/gt.js" type="text/javascript"></script>
    <script charset="UTF-8" src="js/alfie.js"></script>
    <script type="text/javascript">

        function searchItem() {


            var jData = {};

            jData.Brand = $("#searchbar").val();


            $.ajax({
                type: "POST",
                url: "ProductService.svc/searchProducts",
                data: JSON.stringify(jData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (json) {
                    var data = JSON.parse(json.d);
                    $("#Div1").html("");
                    for (start = 0; start < data.binding.length; start++) {
                        var jsonProduct = "{Product:'" + data.binding[start].ProductID + "',Brand:'" + data.binding[start].Brand + "',Model:'" + data.binding[start].Model + "',Price:'" + data.binding[start].Price + "',File:'" + data.binding[start].Filepath + "'}"
                        var imgPath = '<img width="100%" height="100px" src="' + data.binding[start].Filepath + '"/>'
                        var link = '<a href="#" onclick=window.open("moreDetails.aspx?proid=' + data.binding[start].ProductID + '",titlebar=0,toolbar=0,status=0,menubar=0)>More Details</a>';
                        var addToCart = '<input class="" type="submit" value="Add To Cart" onclick="return addOrderItem(' + jsonProduct + ')" />';

                        var brk = '<br>';
                        //return "<div> " + imgPath + " Brand Name : " + Details[0] + "  Model : " + Details[1] + " Price : " + Details[2] + "" + link + " </div>";

                        var newitem = '<div class="gridWrap"> <div class="gridImage" > ' + imgPath + ' </div> <div class="gridProductInformation" > Product ID : '
                             + data.binding[start].ProductID + brk + ' Brand Name : '
                             + data.binding[start].Brand + brk + ' Model : '
                             + data.binding[start].Model + brk + ' Price :<span class="price"> '
                             + data.binding[start].Price + brk + '</span> </div>  <div class="gridLink">' + addToCart + ' <div class="moreDetails">' + link + '<div> <div>   </div>';

                        $("#Div1").append(newitem);


                    }
                    //$("#Div1").hide().html(newitem).fadeIn('fast');
                },
                failure: function (msg) {
                    alert(msg);
                },
                error: function (jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }
            });
            return false;


        }

    </script>
    <script type="text/javascript">

        $(document).ready(function () {
            var param = getParameterByName('brand');
            var param2 = getParameterByName('product');
            if (param != null && param != "" && param2 != null && param2 != "") {

                var jData = {};

                jData.Category = param2;
                jData.Brand = param;


                //                if ($('#searchCategory option:selected').val() != "NULL") {

                //                    
                //                }
                //                if ($('#searchBrand option:selected').val() != "NULL") {

                //                }
                //                if ($('#searchModel option:selected').val() != "NULL") {
                //                    
                //                }
                //                if ($('#searchPriceFrom option:selected').val() != "NULL") {

                //                    
                //                }
                //                if ($('#searchPriceTo option:selected').val() != "NULL") {
                //                    
                //                }

                $.ajax({
                    type: "POST",
                    url: "ProductService.svc/searchProducts",
                    data: JSON.stringify(jData),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (json) {
                        var data = JSON.parse(json.d);

                        for (start = 0; start < data.binding.length; start++) {
                            var jsonProduct = "{Product:'" + data.binding[start].ProductID + "',Brand:'" + data.binding[start].Brand + "',Model:'" + data.binding[start].Model + "',Price:'" + data.binding[start].Price + "'}"
                            var imgPath = '<img width="100%" height="100px" src="' + data.binding[start].Filepath + '"  />'
                            var link = '<a onclick=window.open("moreDetails.aspx?proid=' + data.binding[start].ProductID + '")>More Details</a>';
                            var addToCart = '<input class="" type="submit" value="Add To Cart" onclick="return addOrderItem(' + jsonProduct + ')" />';

                            var brk = '<br>';
                            //return "<div> " + imgPath + " Brand Name : " + Details[0] + "  Model : " + Details[1] + " Price : " + Details[2] + "" + link + " </div>";

                            var newitem = '<div class="gridWrap"> <div class="gridImage" > ' + imgPath + ' </div> <div class="gridProductInformation" > Product ID : '
                             + data.binding[start].ProductID + brk + ' Brand Name : '
                             + data.binding[start].Brand + brk + ' Model : '
                             + data.binding[start].Model + brk + ' Price : <span class="price">'
                             + data.binding[start].Price + brk + ' </span> </div>  <div class="gridLink">' + addToCart + ' <div class="moreDetails">' + link + '<div> <div>   </div>';

                            $("#Div1").append(newitem);


                        }
                    },
                    failure: function (msg) {
                        alert(msg);
                    },
                    error: function (jqXHR, exception) {
                        if (jqXHR.status === 0) {
                            alert('Not connect.\n Verify Network.');
                        } else if (jqXHR.status == 404) {
                            alert('Requested page not found. [404]');
                        } else if (jqXHR.status == 500) {
                            alert('Internal Server Error [500].');
                        } else if (exception === 'parsererror') {
                            alert('Requested JSON parse failed.');
                        } else if (exception === 'timeout') {
                            alert('Time out error.');
                        } else if (exception === 'abort') {
                            alert('Ajax request aborted.');
                        } else {
                            alert('Uncaught Error.\n' + jqXHR.responseText);
                        }
                    }
                });



            }
            //alert(param);
        });

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.href);
            if (results == null)
                return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        }

    </script>
    <script type="text/javascript">
        var cartproduct = new Array();

        function addOrderItem(product) {

            var item = JSON.stringify(product);
            //alert(item);

            //alert(cartproduct.valueOf());


            var detail = JSON.parse(item);
            $("#total").val(parseFloat($("#total").val()) + parseFloat(detail.Price));
            var imgPath = '<img width="100%" height="100px" src="' + detail.File + '"  />'
            var link = '<a href="#" onclick=window.open("moreDetails.aspx?proid=' + parseFloat(detail.Product) + '")>More Details</a>';
            var removeToCart = '<input class="" type="submit" value="Remove Item" onclick="return removeOrderItem(' + detail.Product + ',' + detail.Price + ')" />';

            var brk = '<br>';
            //return "<div> " + imgPath + " Brand Name : " + Details[0] + "  Model : " + Details[1] + " Price : " + Details[2] + "" + link + " </div>";

            var addeditem = '<div  id="order' + detail.Product + '"class="gridWrap"> <div class="gridImage" > ' + imgPath + ' </div> <div class="gridProductInformation" > Product ID : '
                             + detail.Product + brk + ' Brand Name : '
                             + detail.Brand + brk + ' Model : '
                             + detail.Model + brk + ' Price : <span class="price">'
                             + detail.Price + brk + '</span> </div>  <div class="gridLink">' + removeToCart + '  <div class="moreDetails">' + link + ' <div>   </div>';


            $("#cartView").append(addeditem);



            return false;
        }


        function orderedItems() {

            var orderedlength = $("#cartView .gridWrap").length;
            var orderedProductsID = "";

            for (start = 0; start < orderedlength; start++) {
                orderedProductsID = orderedProductsID + $("#cartView .gridWrap")[start].id.toString().replace('order', '') + ",";
            }

            alert(orderedProductsID.substring(0, orderedProductsID.length - 1));

            var custorder = orderedProductsID.substring(0, orderedProductsID.length - 1);

            var jData = {};
            jData.customerorder = custorder;
            jData.customername = $('#custname').val();
            jData.customermobile = $('#custmobile').val();
            jData.customeraddress = $('#custaddress').val();
            jData.customercity = $('#custcity').val();
            jData.customerstate = $('#custstate').val();

            $.ajax({
                type: "POST",
                url: "ProductService.svc/saveOrderInformation",
                data: JSON.stringify(jData),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var Result = eval('(' + response.d + ')');
                    alert(Result["Message"]);
                    alert("Your Order ID is" + Result["Confirmation"] + " Please Make a note of it for further transactions,Your Product will be delivered within 5 working days");
                    // window.location = "NewDashboard.aspx";

                },
                failure: function (msg) {
                    alert(msg);
                },
                error: function (jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.');
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]');
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].');
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.');
                    } else if (exception === 'timeout') {
                        alert('Time out error.');
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.');
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }

            });

            return false;
        }

        function removeOrderItem(productid, price) {



            $("#total").val(parseFloat($("#total").val()) - parseFloat(price));

            $("#order" + productid).remove();

            return false;
        }


    
    </script>
    <style type="text/css">
        input
        {
            padding: 5px;
            font-size: 15px;
            text-shadow: 0px 1px 0px #fff;
            outline: none;
            background: -webkit-gradient(linear, left top, left bottombottom, from(#bcbcbe), to(#ffffff));
            background: -moz-linear-gradient(top,  #bcbcbe,  #ffffff);
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border: 1px solid #717171;
            -webkit-box-shadow: 1px 1px 0px #efefef;
            -moz-box-shadow: 1px 1px 0px #efefef;
            box-shadow: 1px 1px 0px #efefef;
        }
        input:focus
        {
            -webkit-box-shadow: 0px 0px 5px #007eff;
            -moz-box-shadow: 0px 0px 5px #007eff;
            box-shadow: 0px 0px 5px #007eff;
        }
        #cartView
        {
            width: 800px;
        }
        .divrow
        {
            margin-top: 15px;
            margin-left: 20px;
            margin-bottom: 10px;
        }
        .divlbl
        {
            float: left;
            width: 150px;
            border-color: #404040;
            border-width: 1px;
        }
        
        a:hover
        {
            cursor: pointer;
        }
        .gridWrap
        {
            width: 100%;
            float: left;
            height: 150px; /*-----------*/
            background-image: url('IMAGE/white_space.png');
            z-index: 1;
            border: 1px solid black;
        }
        .gridImage
        {
            position: relative;
            width: 20%; /*----------**/
            position: relative;
            margin-left: 10px;
            margin-top: 20px;
            z-index: 2;
            float: left;
        }
        
        .gridProductInformation
        {
            position: relative;
            width: 55%;
            float: left;
            z-index: 2;
            margin-left: 10px;
            margin-top: 20px;
            font-size: medium;
            font-family: @Arial Unicode MS;
        }
        .gridLink
        {
            position: relative;
            width: 20%;
            float: left;
            font-size: medium;
            margin-left: 10px;
            margin-top: 1px;
            z-index: 4;
            font-family: @Arial Unicode MS;
        }
        .moreDetails
        {
            margin-top: 80px;
        }
        
        
        a:link
        {
            text-decoration: none;
        }
        select
        {
            color: white;
            background: transparent;
            overflow: hidden;
            width: 30%;
            -webkit-appearance: none;
            -ms-appearance: none;
            background: url('IMAGE/SKINS/selectArrow.jpg') no-repeat right #ddd;
            border: 3px solid #ccc;
        }
        
        .button
        {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0,0,0,.3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
            box-shadow: 0 1px 2px rgba(0,0,0,.2);
        }
        .button:hover
        {
            text-decoration: none;
        }
        .button:active
        {
            position: relative;
            top: 1px;
        }
        
        .black
        {
            color: #fef4e9;
            border: solid 1px #303030;
            background: #303030;
            background: -webkit-gradient(linear, left top, left bottom, from(#303030), to(#303030));
            background: -moz-linear-gradient(top,  #303030,  #303030);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#303030');
        }
        .black:hover
        {
            background: #282828;
            background: -webkit-gradient(linear, left top, left bottom, from(#383838), to(#181818));
            background: -moz-linear-gradient(top,  #383838,  #181818  );
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#383838', endColorstr='#181818');
        }
        .black:active
        {
            color: #fcd3a5;
            background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
            background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
        }
    </style>
</head>
<body>
    <div id="main-wrap">
        <div id="headerContainer">
            <div class="headerFront">
                <div class="headerImage">
                    <img alt="Home" src="http://tjader-knightinc.com/imges/avantologo.gif" width="250px;"
                        height="75px" />
                </div>
                <div class="headerSearch">
                    <div class="divrow">
                        <div class="divlbl">
                            <input type="text" id="searchbar" style="width: 120px" />
                        </div>
                        <input class="" type="submit" style="width: auto;" value="SEARCH" onclick="return searchItem()" />
                    </div>
                </div>
                <div class="headerLink">
                    <div class="row">
                        <div class="span3">
                            <select class="curry-ddm curry-2a">
                                <option value="USD" data-rate="1">USD</option>
                                <option selected="selected" value="INR" data-rate="56.4455">INR</option>
                                <option value="EUR" data-rate="0.7645">EUR</option>
                                <option value="CAD" data-rate="1.0311">CAD</option>
                                <option value="GBP" data-rate="0.6539">GBP</option>
                                <option value="ILS" data-rate="3.673">ILS</option>
                            </select>
                        </div>
                    </div>
                    <script src="js/jquery.js"></script>
                    <script src="js/prism.js"></script>
                    <script src="js/curry.js"></script>
                    <script>

                        $(function () {

                            $('.curry-1').curry({
                                target: '.hproduct .price',
                                symbols: { 'ILS': '&#8362;' }
                            });

                            $('.curry-2a').curry();

                            $('.curry-2b').curry();

                            $('.curry-2c').curry();

                            $('.curry-3')
                .curry({ change: false })
                .change(function () {

                    var $selected = $(this).find(':selected'),
                        rate = $selected.data('rate'),
                        currency = $selected.val();

                    console.log(currency, rate);
                });

                            $('.curry-4').curry({
                                target: '.price-2',
                                symbols: {
                                    'ILS': '&#8362;',
                                    'GBP': '&#8356;'
                                }
                            });

                            $('.curry-5').curry({
                                base: 'EUR',
                                customCurrency: {
                                    'EUR': 1,
                                    'GBP': 0.8013,
                                    'USD': 1.27
                                }
                            });

                            $('#download-min').click(function () {
                                _gaq.push(['_trackEvent', 'Code', 'Downloaded', 'Minified']);
                            });

                            $('#download-tar').click(function () {
                                _gaq.push(['_trackEvent', 'Code', 'Downloaded', 'Master Tarball']);
                            });

                        });

        
        
                    </script>
                    <%--<img src="IMAGE/SKINS/cart.png" height="75px;" width="80px;" title="View Cart" />--%>
                    <a href='#' class='osx' style="float: left">View Cart</a>
                    <!-- modal content -->
                    <div id="osx-modal-content">
                        <div id="osx-modal-title">
                            Shopping Cart</div>
                        <div class="close">
                            <a href="#" class="simplemodal-close">x</a></div>
                        <div id="osx-modal-data">
                            <form id="form2" runat="server">
                            <div>
                                <label>
                                    Total</label><input type="text" id="total" disabled="disabled" value="0" />
                                <table id="cartView">
                                </table>
                                <input type="button" value="Order" onclick="$('#orderconfirm').show()" />
                                <form action="">
                                <input type="radio" name="user" value="Registered">Already Registered<br>
                                <input type="radio" name="user" value="New">New User
                                </form>
                                <div id="orderconfirm" style="display: none">
                                    <div class="divrow">
                                        <div class="divlbl">
                                            <label id="lblname">
                                                Customer Name</label>
                                        </div>
                                        <input class="textfield" type="text" id="custname" />
                                    </div>
                                    <div class="divrow">
                                        <div class="divlbl">
                                            <label id="lblname">
                                                Customer Mobile</label>
                                        </div>
                                        <input class="textfield" type="text" id="custmobile" />
                                    </div>
                                    <div class="divrow">
                                        <div class="divlbl">
                                            <label id="lblname">
                                                Customer Address</label>
                                        </div>
                                        <input class="textfield" type="text" id="custaddress" />
                                    </div>
                                    <div class="divrow">
                                        <div class="divlbl">
                                            <label id="lblname">
                                                Customer City</label>
                                        </div>
                                        <input class="textfield" type="text" id="custcity" />
                                    </div>
                                    <div class="divrow">
                                        <div class="divlbl">
                                            <label id="lblname">
                                                Customer State</label>
                                        </div>
                                        <input class="textfield" type="text" id="custstate" />
                                    </div>
                                    <input type="button" value="Confirm Order" onclick="return orderedItems()" />
                                </div>
                            </div>
                            </form>
                            <p>
                                <button class="simplemodal-close">
                                    Close</button>
                                <span>(or press ESC or click the overlay)</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="nav">
                <ul id="ldd_menu" class="ldd_menu">
                    <li><span>Laptops</span><!-- Increases to 510px in width-->
                        <div class="ldd_submenu">
                            <ul>
                                <li class="ldd_heading">By Brand</li>
                                <li><a href="Search.aspx?brand=Asus&product=Laptop">Asus</a></li>
                                <li><a href="Search.aspx?brand=Sony&product=Laptop">Sony</a></li>
                                <li><a href="Search.aspx?brand=Dell&product=Laptop">Dell</a></li>
                                <li><a href="Search.aspx?brand=Lenova&product=Laptop">Lenova</a></li>
                                <li><a href="Search.aspx?brand=HP&product=Laptop">HP</a></li>
                            </ul>
                            <ul>
                                <li class="ldd_heading">By Model</li>
                                <li><a href="#">MacBook</a></li>
                                <li><a href="#">Vaio</a></li>
                                <li><a href="#">Inspiron</a></li>
                                <li><a href="#">Extreme Sports</a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                            </ul>
                            <ul>
                                <li class="ldd_heading">By Theme</li>
                                <li><a href="#">Paradise Islands</a></li>
                                <li><a href="#">Cruises &amp; Boat Trips</a></li>
                                <li><a href="#">Wild Animals &amp; Safaris</a></li>
                                <li><a href="#">Nature Pure</a></li>
                                <li><a href="#">Helping others &amp; For Hope</a></li>
                                <li><a href="#">Diving</a></li>
                            </ul>
                            <a class="ldd_subfoot" href="#">+ New Deals</a>
                        </div>
                    </li>
                    <li><span>Desktops</span>
                        <div class="ldd_submenu">
                            <ul>
                                <li class="ldd_heading">By Brand</li>
                                <li><a href="Search.aspx?brand=Apple&product=Desktop">Apple</a></li>
                                <li><a href="Search.aspx?brand=Dell&product=Desktop">Dell</a></li>
                                <li><a href="Search.aspx?brand=HP&product=Desktop">HP</a></li>
                                <li><a href="Search.aspx?brand=Lenovo&product=Desktop">Lenovo</a></li>
                                <li><a href="Search.aspx?brand=Acer&product=Desktop">Acer</a></li>
                            </ul>
                            <ul>
                                <li class="ldd_heading">By Category</li>
                                <li><a href="#">Sun &amp; Beach</a></li>
                                <li><a href="#">Adventure</a></li>
                                <li><a href="#">Science &amp; Education</a></li>
                                <li><a href="#">Extreme Sports</a></li>
                                <li><a href="#">Relaxing</a></li>
                                <li><a href="#">Spa and Wellness</a></li>
                            </ul>
                            <ul>
                                <li class="ldd_heading">By Theme</li>
                                <li><a href="#">Paradise Islands</a></li>
                                <li><a href="#">Cruises &amp; Boat Trips</a></li>
                                <li><a href="#">Wild Animals &amp; Safaris</a></li>
                                <li><a href="#">Nature Pure</a></li>
                                <li><a href="#">Helping others &amp; For Hope</a></li>
                                <li><a href="#">Diving</a></li>
                            </ul>
                            <a class="ldd_subfoot" href="#">+ New Deals</a>
                        </div>
                    </li>
                    <li><span>Devices</span>
                        <div class="ldd_submenu">
                            <ul>
                                <li class="ldd_heading">Desktop Devices</li>
                                <li><a href="#">Harddisk</a></li>
                                <li><a href="#">RAM</a></li>
                                <li><a href="#">Processor</a></li>
                                <li><a href="#">Motherboard</a></li>
                                <li><a href="#">Graphics Card</a></li>
                            </ul>
                            <ul>
                                <li class="ldd_heading">Laptop Devices</li>
                                <li><a href="#">Battery</a></li>
                                <li><a href="#">RAM</a></li>
                                <li><a href="#">Laptop Bags</a></li>
                                <li><a href="#">Charger</a></li>
                            </ul>
                            <ul>
                                <li class="ldd_heading">By Theme</li>
                                <li><a href="#">Paradise Islands</a></li>
                                <li><a href="#">Cruises &amp; Boat Trips</a></li>
                                <li><a href="#">Wild Animals &amp; Safaris</a></li>
                                <li><a href="#">Nature Pure</a></li>
                                <li><a href="#">Helping others &amp; For Hope</a></li>
                                <li><a href="#">Diving</a></li>
                            </ul>
                            <a class="ldd_subfoot" href="#">+ New Deals</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="products">
                <div class="category">
                    <div class="Criteria">
                        <form action="">
                        <table>
                            <tr>
                                <td>
                                    <label>
                                        Category</label>
                                </td>
                                <td>
                                    <select id="searchCategory" name="searchCategory" style="width: 100px;">
                                        <option value="NULL">Select</option>
                                        <option value="Desktop">Desktop</option>
                                        <option value="Laptop">Laptop</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Brand</label>
                                </td>
                                <td>
                                    <select id="searchBrand" name="searchBrand" style="width: 100px;">
                                        <option value="NULL">Select</option>
                                        <option value="Asus">Asus</option>
                                        <option value="Acer">Acer</option>
                                        <option value="Apple">Apple</option>
                                        <option value="Dell">Dell</option>
                                        <option value="Lenovo">Lenovo</option>
                                        <option value="Sony">Sony</option>
                                        <option value="Toshiba">Toshiba</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Model</label>
                                </td>
                                <td>
                                    <select id="searchModel" name="searchModel" style="width: 100px;">
                                        <option value="NULL">Select</option>
                                        <option value="Duo 11">Duo 11</option>
                                        <option value="S Series 13A">S Series 13A</option>
                                        <option value="S Series 13">S Series 13</option>
                                        <option value="S Series 15">S Series 15</option>
                                        <option value="T Series 11">T Series 11</option>
                                        <option value="T Series 13">T Series 13</option>
                                        <option value="T Series 14">T Series 14</option>
                                        <option value="ThinkPad">ThinkPad</option>
                                        <option value="Vaio">Vaio </option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Price From</label>
                                </td>
                                <td>
                                    <select id="searchPriceFrom" name="searchPriceFrom" style="width: 100px;">
                                        <option value="NULL">Select</option>
                                        <option value="20000">20000</option>
                                        <option value="30000">30000</option>
                                        <option value="40000">40000</option>
                                        <option value="50000">50000</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>
                                        Price To</label>
                                </td>
                                <td>
                                    <select id="searchPriceTo" name="searchPriceTo" style="width: 100px;">
                                        <option value="NULL">Select</option>
                                        <option value="30000">30000</option>
                                        <option value="40000">40000</option>
                                        <option value="50000">50000</option>
                                        <option value="60000">60000</option>
                                        <option value="70000">70000</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center">
                                    <input class="" type="submit" style="width: auto;" value="SEARCH" onclick="return getProducts1()" />
                                </td>
                            </tr>
                        </table>
                        </form>
                    </div>
                    <div>
                        <img src="IMAGE/SKINS/Special Offers.jpg" height="130px;" width="100%;" />
                    </div>
                </div>
                <div class="items" style="z-index: 1">
                    <form id="form1">
                    <div id="Div1" style="height: 400px; width: 100%; float: left;">
                    </div>
                    <div id="pjmap">
                    </div>
                    <script type="text/javascript">



                        function successFunction(jsondata) {
                            var thegrid = jQuery("#jsonmap")[0];
                            thegrid.addJSONData(JSON.parse(jsondata.d));
                        }

                        function getProducts1() {



                            var jData = {};
                            if ($('#searchCategory option:selected').val() != "NULL") {

                                jData.Category = $('#searchCategory option:selected').val();
                            }
                            if ($('#searchBrand option:selected').val() != "NULL") {
                                jData.Brand = $('#searchBrand option:selected').val();
                            }
                            if ($('#searchModel option:selected').val() != "NULL") {
                                jData.Model = $('#searchModel option:selected').val();
                            }
                            if ($('#searchPriceFrom option:selected').val() != "NULL") {

                                jData.PriceFrom = $('#searchPriceFrom option:selected').val();
                            }
                            if ($('#searchPriceTo option:selected').val() != "NULL") {
                                jData.PriceTo = $('#searchPriceTo option:selected').val();
                            }

                            $.ajax({
                                type: "POST",
                                url: "ProductService.svc/searchProducts",
                                data: JSON.stringify(jData),
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (json) {
                                    var data = JSON.parse(json.d);
                                    $("#Div1").html("");
                                    for (start = 0; start < data.binding.length; start++) {
                                        var jsonProduct = "{Product:'" + data.binding[start].ProductID + "',Brand:'" + data.binding[start].Brand + "',Model:'" + data.binding[start].Model + "',Price:'" + data.binding[start].Price + "',File:'" + data.binding[start].Filepath + "'}"
                                        var imgPath = '<img width="100%" height="100px" src="' + data.binding[start].Filepath + '"/>'
                                        var link = '<a href="#" onclick=window.open("moreDetails.aspx?proid=' + data.binding[start].ProductID + '",titlebar=0,toolbar=0,status=0,menubar=0)>More Details</a>';
                                        var addToCart = '<input class="" type="submit" value="Add To Cart" onclick="return addOrderItem(' + jsonProduct + ')" />';

                                        var brk = '<br>';
                                        //return "<div> " + imgPath + " Brand Name : " + Details[0] + "  Model : " + Details[1] + " Price : " + Details[2] + "" + link + " </div>";

                                        var newitem = '<div class="gridWrap"> <div class="gridImage" > ' + imgPath + ' </div> <div class="gridProductInformation" > Product ID : '
                             + data.binding[start].ProductID + brk + ' Brand Name : '
                             + data.binding[start].Brand + brk + ' Model : '
                             + data.binding[start].Model + brk + ' Price :<span class="price"> '
                              + data.binding[start].Price + brk + '</span> </div>  <div class="gridLink">' + addToCart + ' <div class="moreDetails">' + link + '<div> <div>   </div>';




                                        $("#Div1").append(newitem);


                                    }
                                    //$("#Div1").hide().html(newitem).fadeIn('fast');
                                },
                                failure: function (msg) {
                                    alert(msg);
                                },
                                error: function (jqXHR, exception) {
                                    if (jqXHR.status === 0) {
                                        alert('Not connect.\n Verify Network.');
                                    } else if (jqXHR.status == 404) {
                                        alert('Requested page not found. [404]');
                                    } else if (jqXHR.status == 500) {
                                        alert('Internal Server Error [500].');
                                    } else if (exception === 'parsererror') {
                                        alert('Requested JSON parse failed.');
                                    } else if (exception === 'timeout') {
                                        alert('Time out error.');
                                    } else if (exception === 'abort') {
                                        alert('Ajax request aborted.');
                                    } else {
                                        alert('Uncaught Error.\n' + jqXHR.responseText);
                                    }
                                }
                            });
                            return false;
                        }

                    </script>
                    </form>
                </div>
            </div>
            <div id="footer">
                Copyright © Kaizen Technosoft</div>
        </div>
    </div>
</body>
</html>
